<template>
	<view class="content">

		<view>
			<u-swiper :list="swiperList" indicator @change="swiperChange" @click="swiperClick"></u-swiper>
		</view>

		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="flex padding justify-between">
				<view class="flex align-center">
					<image @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
					</image>
					<view class="user-info">
						<view class="u_title">
							<span>{{ name }}</span>
							<span class="vipLevel" v-bind:class="{ noVip: isNoVip }">VIP{{user.vip}}</span>
						</view>
						<view class="u_title" style="font-size: 14px;">
							ID：{{ userId }}
						</view>

					</view>
				</view>

			</view>

			<view class="flex align-center justify-around " style="color: white;">
				<view>
					<view class="amount">{{user.amount}}
					</view>
					<view class="title ">{{$t('mine.balance')}}</view>
				</view>
				<view>
					<view class="amount">{{user.team}}
					</view>
					<view class="title ">{{$t('mine.teamBalance')}}</view>
				</view>
				<view>
					<view class="amount">{{user.integral}}
					</view>
					<view class="title ">{{$t('mine.point')}}</view>
				</view>
			</view>

		</view>

		<view class="content-section-top">

		</view>

		<view class="content-section">
			<view class="mine-actions grid col-4 text-center">
				<view class="action-item" @click="inviteShow">
					<view class="flex justify-center">
						<u-icon size="34" name="man-add" color="#F6DDA4">
						</u-icon>
					</view>
					<!-- <view class="iconfont icon-friendfill text-pink icon"></view> -->
					<text class="text">{{$t('home.invite')}}</text>
				</view>
				<view class="action-item" @click="terminalShow()">
					<!-- <view class="iconfont icon-service text-blue icon"></view> -->
					<view class="flex justify-center">
						<u-icon size="34" name="bag" color="#F6DDA4">
						</u-icon>
					</view>
					<text class="text">{{$t('home.miner')}}</text>
				</view>
				<view class="action-item " @click="redShow()">
					<view class="flex justify-center">
						<u-icon size="34" name="red-packet" color="#F6DDA4">
						</u-icon>
					</view>
					<!-- <view class="iconfont icon-community text-mauve icon"></view> -->
					<text class="text">{{$t('home.red')}}</text>
				</view>
				<view class="action-item " @click="exchangeShow()">
					<!-- <view class="iconfont icon-service text-blue icon"></view> -->
					<view class="flex justify-center">
						<u-icon size="34" name="hourglass" color="#F6DDA4">
						</u-icon>
					</view>
					<text class="text">{{$t('home.exchange')}}</text>
				</view>

				<view class="action-item action-margin" @click="ctbExchangeShow()">
					<!-- <view class="iconfont icon-service text-blue icon"></view> -->
					<view class="flex justify-center">
						<u-icon size="34" name="hourglass-half-fill" color="#F6DDA4">
						</u-icon>
					</view>
					<text class="text">{{$t('home.lpExchange')}}</text>
				</view>

				<view class="action-item action-margin" @click="raffleShow()">
					<!-- <view class="iconfont icon-service text-blue icon"></view> -->
					<view class="flex justify-center">
						<u-icon size="34" name="gift" color="#F6DDA4">
						</u-icon>
					</view>
					<text class="text">{{$t('home.raffle')}}</text>
				</view>

				<view class="action-item action-margin" @click="teamShow()">
					<view class="iconfont icon-friendfill text-pink icon" style="margin-top: 2px; margin-bottom: 3px;">
					</view>
					<text class="text">{{$t('home.team')}}</text>
				</view>

				<view class="action-item action-margin" @click="companyShow()">
					<!-- <view class="iconfont icon-dianzan text-green icon"></view> -->
					<view class="flex justify-center">
						<u-icon size="34" name="home" color="#F6DDA4">
						</u-icon>
					</view>
					<text class="text">{{$t('home.company')}}</text>
				</view>


			</view>

			<!-- 	<uni-notice-bar scrollable single show-icon :text="notice" background-color="#f5f6f7"
				color="rgb(51, 51, 51)" /> -->

			<view class="content-company">
				<!-- <view style="margin-left: 30px; font-weight: bold; font-size: 20px; ">公司运行时间:</view>
				<view class="text-center" style="font-weight: bold; font-size: 20px;">20312天</view> -->

				<view class="pan-day">
					<view class="title">{{$t('home.companyRun')}}</view>

					<view class="content">
						<view class="day-box time-box">
							<view class="text">{{runTime.day}}</view>
							<view class="unit">{{$t('common.day')}}</view>
						</view>
						<view class="hour-box time-box">
							<view class="text">{{runTime.hour}}</view>
							<view class="unit">{{$t('home.hour')}}</view>
						</view>
						<view class="minute-box time-box">
							<view class="text">{{runTime.minute}}</view>
							<view class="unit">{{$t('home.minute')}}</view>
						</view>
						<view class="second-box time-box">
							<view class="text">{{runTime.second}}</view>
							<view class="unit">{{$t('home.second')}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="content-coin">
				<view class=" text-center grid col-3" style="margin-bottom: 10px;">
					<view class="title">{{$t('home.coin')}}</view>
					<view class="title">{{$t('home.newPrice')}}</view>
					<view class="title">{{$t('home.rising')}}</view>
				</view>
				<view class=" text-center  grid col-3" style="margin-bottom: 5px;" v-for="coin in coinList">
					<view class="content">{{coin.coinName}}</view>
					<view class="content">{{coin.price}}</view>
					<view class="flex justify-center">
						<view class="addColor box" :class="coin.symbol == '1' ?'addColor':'divColor'">
							{{coin.increase}}%
						</view>
					</view>
				</view>

			</view>

		</view>


	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		getBalanceInfo,
		getMineInfo,
	} from "@/api/system/user.js"
	import {
		getCoinInfo,
		isInsert,
		saveCoin
	} from "@/api/coin.js"

	export default {

		data() {
			return {

				userId: this.$store.state.user.userId,
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
				isNoVip: true,
				user: {},
				invite: {
					show: false,
					code: '',
					url: '',
				},
				// red_envilope: {
				// 	show: false,
				// 	code: '',
				// 	tips: true,
				// 	tipsContent: '恭喜您已抽中红包，红包金额为：100.45 !',
				// },
				runTime: {
					startTime: '2023-01-21 00:00:00',
					day: '',
					hour: '',
					minute: '',
					second: '',
				},
				companyUrl: '',
				swiperList: [],
				user: {},
				coinList: []
			}
		},
		onShow() {
			uni.setTabBarItem({
				index: 4,
				visible: false
			})
		},
		onLoad: function(option) {
			this.getBalanceInfoFun();
			getBalanceInfo().then(rsp => {
				if (rsp.code == 200) {
					this.runTime.startTime = rsp.data.runTime;
					this.companyUrl = rsp.data.companyUrl;
					this.swiperList = rsp.data.balanceUrl;
					//this.user = rsp.data;
					setInterval(this.setRunTime, 1000);
				}
			})
			getCoinInfo().then(rsp => {
				if (rsp.code == 200) {
					this.coinList = rsp.rows;
				}
			})
			var $uni = uni;
			isInsert().then(rsp => {
				if (rsp.code == 200 && rsp.data == true) {
					$uni.request({
						url: 'https://www.binance.com/bapi/composite/v1/public/promo/cmc/cryptocurrency/listings/latest?limit=100&start=1',
						method: 'get',
						success(rsp) {
							if (rsp.data.code == '000000') {
								var list = rsp.data.data.body.data;
								var coinList = [];
								for (let index in list) {
									var data = list[index];
									var coin = {
										'coinName': data.symbol,
										'price': data.quote.USD.price,
										'percentChange24h': data.quote.USD.percent_change_24h,
									};
									coinList.push(coin);
								}
								saveCoin(coinList).then(rsp => {
									if (rsp.code == 200) {
										this.coinList = rsp.data;
									}
								})
							}
						}
					})
				}
			})
		},
		methods: {
			swiperChange() {

			},
			getBalanceInfoFun() {
				getMineInfo().then(rsp => {
					if (rsp.code == 200) {
						this.user = rsp.data;
						if (rsp.data.vip > 0) {
							this.isNoVip = false;
						}
					}
				});
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			swiperClick() {

			},
			// inviteClose() {
			// 	this.invite.show = false;
			// },
			redClose() {
				this.red_envilope.show = false;
			},
			inviteShow() {
				uni.navigateTo({
					url: '/pages/home/invite-friend'
				})
			},
			terminalShow() {
				uni.navigateTo({
					url: '/pages/home/terminal'
				})
			},
			redShow() {
				uni.navigateTo({
					url: '/pages/home/red_envelope'
				})
			},
			teamShow() {
				uni.navigateTo({
					url: '/pages/home/team'
				})
			},
			companyShow() {

				// #ifdef H5
				window.location.href = this.companyUrl;
				// #endif

				// #ifdef APP-PLUS
				var platform = uni.getSystemInfoSync().platform;
				if (platform == 'android') {
					//ios 需要解码
					//window.location.href = this.companyUrl;
					plus.runtime.openURL(this.companyUrl);
				}
				// #endif
			},
			exchangeShow() {
				uni.navigateTo({
					url: '/pages/home/integral-exchange'
				})
			},
			ctbExchangeShow() {
				uni.navigateTo({
					url: '/pages/home/ctb-exchange'
				})
				//this.$u.toast(this.$t('home.noOpen'))
				
			},
			raffleShow() {
				uni.navigateTo({
					url: '/pages/home/raffle'
				})
			},
			copyInviteCode() {
				uni.setClipboardData({
					data: this.invite.code,
					success() {
						uni.showToast({
							title: this.$t('common.copySuccess')
						});
					}
				});
			},
			copyInviteUrl() {
				uni.setClipboardData({
					data: this.invite.url,
					success() {
						uni.showToast({
							title: this.$t('common.copySuccess')
						});
					}
				});
			},

			receiveRedEnvilope() {

			},
			setRunTime() {
				var X = new Date(this.runTime.startTime);
				var Y = new Date();
				var T = (Y.getTime() - X.getTime());
				var M = 24 * 60 * 60 * 1000;
				var a = T / M;
				var A = Math.floor(a);
				var b = (a - A) * 24;
				var B = Math.floor(b);
				var c = (b - B) * 60;
				var C = Math.floor((b - B) * 60);
				var D = Math.floor((c - C) * 60);
				this.runTime.day = A;
				this.runTime.hour = B;
				this.runTime.minute = C;
				this.runTime.second = D;
			},
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},


	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;
		color: $uni-color-font;
	}

	.content {
		width: 100%;
		height: 100%;

		.header-section {
			padding: 15px 15px 15px 15px;
			background-color: $uni-color-box;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;

					.vipLevel {
						margin-left: 12px;
						color: #eaa02a;
						padding: 0 10px;
						font-weight: 500;
						font-size: 14px;
						height: 20px;
						background: linear-gradient(90deg, #fff4c1, #fae096);
						border-radius: 13px 13px 13px 13px;
					}

					.noVip {
						color: gray;
						background: linear-gradient(90deg, #e2d8d8, #e2d8d8);
					}
				}
			}

			.amount {
				font-size: 18px;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				text-align: center;
			}

			.title {
				font-size: 12px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				text-align: center;
			}

			.mine-actions {
				margin: 15px 15px;
				padding: 5px 0px;
				border-radius: 8px;
				background-color: $uni-color-box;

				.action-item {
					.icon {
						font-size: 28px;

					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}

			.menu-list {

				.list-cell {
					background-color: $uni-color-box;
					color: $uni-color-font;
				}
			}
		}

		.content-section {
			position: relative;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;

				background-color: $uni-color-box;

				.action-item {
					.icon {
						font-size: 28px;
						color: $uni-color-primary;
					}

					.iconColor {
						color: $uni-color-primary;
					}

					.text {
						color: white;
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}

				.action-margin {
					margin-top: 5px;
				}
			}
		}

		.content-company {
			position: relative;
			margin: 0px 15px;
			margin-bottom: 20px;

			.pan-day {
				padding-top: 20px;
				border-radius: 8px;
				box-shadow: 0 10px 20px 10px rgba(0, 85, 127, .5);
				//margin-top: -52px;
				background-color: rgba(0, 85, 127, .5);
				-webkit-backdrop-filter: blur(2px);
				backdrop-filter: blur(2px);
				display: flex;
				flex-direction: column;
				align-items: center;

				.title {
					margin-top: 0px;
					color: #fff;
					font-size: 17px;
					font-weight: 700;
					font-family: UTM Than Chien Tranh;
				}

				.content {
					width: 100%;
					margin: 10px 0;
					display: flex;
					justify-content: space-evenly;
					align-content: center;
					flex-wrap: nowrap;
					align-items: center;
					flex-direction: row;

					.time-box {
						display: flex;
						flex-direction: column;
						align-items: center;
						text-align: center;

						.text {
							font-family: Black Ops One;
							color: #00ff7f;
							font-size: 20px;
						}

						.unit {
							color: #fff;
							font-size: 12px;
						}
					}
				}
			}
		}

		.content-coin {
			position: relative;
			margin: 15px 15px;
			padding: 20px 0px;
			border-radius: 8px;
			background-color: $uni-color-box;

			.title {
				color: gray;
			}

			.content {
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.box {
				width: 60px;
				height: 26px;
				background-color: #F44860;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 3px;
				font-size: 13px;
			}

			.addColor {
				background-color: #2EBD86;
			}

			.divColor {
				background-color: #F6465D;
			}
		}



	}
</style>